<template>
    <div class="main-container">
        <x-header style="background: #34bd7ed1" :right-options="{showMore: true}"
                  :left-options="{backText: '',color:'#fff'}">报告详情
        </x-header>
        <div class="top-container">
            <p>检查项目：24小时动态心电图</p>
            <p>检查项目：24小时动态心电图</p>
            <p>检查项目：24小时动态心电图</p>
            <p>检查项目：24小时动态心电图</p>
            <p>检查项目：24小时动态心电图</p>
            <p>检查项目：24小时动态心电图</p>
            <p>检查项目：24小时动态心电图</p>


        </div>
        <div class="card-container">
            <card :header="{title: '临床判断' }">
                <div slot="content" class="card-content">
                    <span>上呼吸道感染</span>
                </div>
            </card>
        </div>
        <div class="card-container">
            <card :header="{title: '影像所见' }">
                <div slot="content" class="card-content">
                    <p>无异常无异常无异常无异常无异常无异常无异常无异常无异常</p>
                </div>
            </card>
        </div>

        <div class="card-container">
            <card :header="{title: '诊断意见' }">
                <div slot="content" class="card-content">
                    <p>1.心率加速</p>
                    <p>1.其它</p>
                </div>
            </card>
        </div>
    </div>
</template>


<script>
    import {Group, Cell, XHeader, Swiper, Grid, GridItem, GroupTitle, Icon, Flexbox, FlexboxItem, Card} from 'vux'

    export default {
        components: {
            Swiper,
            XHeader,
            Group,
            Card,
            Grid,
            Flexbox,
            FlexboxItem,
            GroupTitle,
            Icon,
            GridItem,
            Cell,
        },
        data() {
            return {
                // note: changing this line won't causes changes
                // with hot-reload because the reloaded component
                // preserves its current state and we are modifying
                // its initial state.
                iconfont: 'iconfont',
                msg: 'Hello World!',
                swiperList: [
                    {
                        url: 'javascript:',
                        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
                        title: '测试banner1'
                    }, {
                        url: 'javascript:',
                        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
                        title: '测试banner2'
                    }
                ],
                gridList: [
                    {
                        title: "就诊记录",
                        icon: "iconbingzhi-copy",
                    }, {
                        title: "预约挂号",
                        icon: "iconyijian",
                    }, {
                        title: "报告查询",
                        icon: "iconhuanzhegoutong",
                    }, {
                        title: "健康证明",
                        icon: "iconjingshenxinlike",
                    }, {
                        title: "门诊费用",
                        icon: "iconwodegongzuoshi",
                    }, {
                        title: "中医体质",
                        icon: "iconzhongyike",
                    }
                ]
            }
        },
        methods: {
            goLink() {

            }
        }

    }
</script>

<style scoped>
    .main-container {
        width: 100vw;
        height: 100vh;
        background: #d8d8d8;

    }

    .vux-header .vux-header-right > a {
        color: #fff !important;
    }

    .vux-header .vux-header-left .left-arrow:before {
        border-color: #fff !important;

    }

    .card-container,.top-container {
        background: #fff;
        margin-top: 10px;
    }

    .card-content,.top-container {
        padding: 15px;
        font-size: 13px;
        color: #999;

    }

</style>
